<template>
  <div class="app_container">
    <el-card>
      <div slot="header" class="clearfix">
        <el-button-group>
          <el-button type="info" icon="el-icon-info" v-if="user_info.user_code"
            >当前用户ID : {{ user_info.user_code }}</el-button
          >
          <el-button
            type="success"
            icon="el-icon-user-solid"
            v-if="user_info.nickname"
            >当前用户昵称 : {{ user_info.nickname }}</el-button
          >
        </el-button-group>
      </div>
      <div class="item" v-loading="listLoading">
        <el-table
          empty-text="该用户暂无人脉圈"
          ref="dataList"
          :data="menuList"
          style="width:100%;margin-bottom: 20px;"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="id" width="70" label="ID"></el-table-column>
          <!-- <el-table-column prop="user_id" width="100" label="用户ID" > </el-table-column> -->
          <el-table-column prop="user_code" width="100" label="用户ID">
          </el-table-column>
          <el-table-column prop="nickname" label="用户昵称"> </el-table-column>
          <el-table-column prop="head_picture" width="70" label="头像">
            <template slot-scope="{ row }">
              <el-popover placement="right" trigger="hover">
                <el-image class="big" :src="row['head_picture']"></el-image>
                <el-image
                  class="small"
                  slot="reference"
                  :src="row['head_picture']"
                ></el-image>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="type" width="70" label="类型">
            <template slot-scope="{ row }">
              <el-tag
                :type="row.type === 1 ? 'danger' : 'success'"
                v-text="row.type === 1 ? '非CP' : 'CP'"
              ></el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="class_icon_url" width="80" label="等阶图标">
            <template slot-scope="{ row }">
              <el-popover placement="right" trigger="hover">
                <el-image class="big" :src="row['class_icon_url']"></el-image>
                <el-image
                  class="small"
                  slot="reference"
                  :src="row['class_icon_url']"
                ></el-image>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="class_number"
            width="70"
            label="阶级数"
          ></el-table-column>
          <el-table-column
            prop="grade_number"
            width="70"
            label="等级数"
          ></el-table-column>
          <el-table-column prop="today_intimacy" label="今日增加亲密度">
          </el-table-column>
          <el-table-column prop="today_intimacy_free" label="今日免费亲密度">
          </el-table-column>
          <el-table-column prop="intimacy" label="累计亲密度">
          </el-table-column>
          <el-table-column prop="add_time" label="添加时间">
            <template slot-scope="{ row }">
              <el-tag type="info" v-text="row.add_time"></el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="update_time" label="更新时间">
            <template slot-scope="{ row }">
              <el-tag
                v-if="row.update_time"
                type="success"
                v-text="row.update_time"
              ></el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="handleConfig(scope.row)"
                plain
                >查看人脉</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.perPage"
          @pagination="getList"
        />
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogFormVisible" title="新增">
      <el-form
        :model="editRulesForm"
        :rules="editRulesFormRules"
        ref="editRulesForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户ID" prop="room_type_name">
          <el-input
            type="textarea"
            v-model="editRulesForm.room_type_name"
            placeholder="请输入用户ID 用,分割"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否推荐">
          <el-radio-group v-model="editRulesForm.recommend">
            <el-radio :label="1">推荐</el-radio>
            <el-radio :label="2">不推荐</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="添加失败" prop="room_type_name">
          <el-input
            type="textarea"
            v-model="editRulesForm.room_type_name"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false">返回</el-button>
          <el-button type="primary" @click="submitForm('editRulesForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { listData } from "@/api/contacts/contactsDetail";

export default {
  data() {
    return {
      editRulesFormRules: {},
      dialogFormVisible: false,
      editRulesForm: {},
      menuList: [],
      user_info: {},
      userStatus: [
        { value: 1, label: "在线" },
        { value: 2, label: "不在线" }
      ],
      roomStatus: [
        { value: 1, label: "在房间" },
        { value: 2, label: "不在房间" }
      ],
      listLoading: false,
      listQuery: {
        page: 1,
        per_page: 10,
        user_id: undefined
      },
      total: 0
    };
  },
  created() {
    this.listQuery.user_id = this.$route.query.user_id;
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      let urlData = "?";
      if (this.listQuery.page) {
        urlData = urlData + `page=${this.listQuery.page}&`;
      }
      if (this.listQuery.per_page) {
        urlData = urlData + `per_page=${this.listQuery.per_page}`;
      }
      urlData = urlData + `&user_id=${this.listQuery.user_id}`;
      listData(urlData).then(({ data }) => {
        this.menuList = data.list;
        this.user_info = data.user_info;
        this.total = data.total;
        this.listLoading = false;
      });
    },
    handleConfig(row) {
      this.$router.push({
        path: "/contacts/contactsDetail",
        query: { user_id: row.user_id }
      });
    }
  }
};
</script>

<style>
[v-cloak] {
  display: none;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-image.big {
  max-width: 200px;
  max-height: 200px;
}

.el-image.small {
  width: 50px;
  height: 50px;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

/deep/ .el-card__header {
  padding-bottom: 0;
}
</style>
